// This file is part of Indico.
// Copyright (C) 2002 - 2025 CERN
//
// Indico is free software; you can redistribute it and/or
// modify it under the terms of the MIT License; see the
// LICENSE file for more details.

@use 'base' as *;
@use 'partials/boxes' as *;

.ui-datepicker {
  @include border-all();
  @include single-box-shadow();
  background: white;
  z-index: 2;

  .ui-datepicker-header {
    @include border-bottom();
    border-radius: 0;
    background-color: $light-gray !important;
    color: $dark-blue !important;
    margin: -0.2em -0.2em 0;

    .ui-datepicker-month,
    .ui-datepicker-year {
      width: 48%;
      margin: 0 1px;
    }

    .ui-datepicker-prev,
    .ui-datepicker-next {
      transition: background;
      transition: color;
      border: none !important;
      color: $gray;
      margin-top: 0.1em;
      text-align: center;
      top: 1px !important;

      &::before {
        vertical-align: -30%;
      }
    }

    &.ui-state-disabled {
      .ui-datepicker-prev,
      .ui-datepicker-next {
        background: none !important;
        cursor: default;
      }
    }

    &:not(.ui-state-disabled) {
      .ui-datepicker-prev:hover,
      .ui-datepicker-next:hover {
        color: white;
        background: $blue;
      }
    }

    .ui-datepicker-prev {
      @include icon-before('icon-prev');
      left: 3px !important;
    }

    .ui-datepicker-next {
      @include icon-before('icon-next');
      right: 3px !important;
    }

    .ui-icon {
      display: none;
    }
  }

  .ui-datepicker-calendar {
    background: white;
    padding: 0 0.2em;
    table-layout: fixed;

    th {
      cursor: default;
    }

    td {
      padding: 0;

      a,
      span {
        @include transition(background);
        border: 1px solid white;
        text-align: center;
      }
    }

    &.ui-state-disabled .ui-datepicker-current-day a {
      cursor: default;
    }

    .ui-state-default {
      background: $light-blue;
    }

    .ui-state-active {
      background: $blue;
      color: white !important;
      font-weight: bold;
    }

    .ui-state-hover {
      background: $blue;
      color: white !important;
    }
  }

  .ui-datepicker-buttonpane {
    margin: 0;
    padding: 0;

    button.ui-datepicker-current {
      @include transition(background, color);
      background: $light-blue;
      border: none !important;
      float: right;
      margin-bottom: 0.2em;
      margin-right: 1px;
      margin-top: 0.2em;
      opacity: 1;
      outline: none;
    }

    &:not(.ui-state-disabled) button.ui-datepicker-current:hover {
      background: $blue;
      color: white;
    }

    &.ui-state-disabled button.ui-datepicker-current {
      cursor: default;
    }
  }
}

.ui-datepicker-trigger {
  @include icon-before('icon-calendar');
  background: transparent;
  border: none;
  color: $light-black;
  cursor: pointer;
  outline: none;
  padding: 0;
  position: relative;
  right: 20px;
  top: 2px;

  &:hover::before {
    color: $blue;
  }

  &:active::before {
    color: $dark-blue;
  }
}

input.hasDatepicker {
  @include icon-before('icon-calendar');
  margin: 0 2px;
  padding-right: 22px !important;

  &:disabled + button {
    pointer-events: none;
  }
}
